<template>
	<view>
		<view class="topnav">
			<view class="leftnav">
				<picker mode="date" fields="day" :value="date" @change="bindDateChange" class="picher">
					<view>
						<text style="font-size: 40rpx; color: white;">{{date}}</text>
					</view>
				</picker>
			</view>
			<view class="rightnav">
				<u-subsection 
					:list="list" 
					:current="current" 
					mode="subsection"
					activeColor="#007AFF"
					@change="sectionChange"
					fontSize="17"
					></u-subsection>
			</view>
		</view>
		
		<view class="money">
			<view class="money-banner">
				<text v-if="current == 0">{{expend_text}}</text>
				<text v-else>{{income_text}}</text>
			</view>
			<view class="money-column">
				<view class="money-icon">
					<u-icon name="/static/rmb.png" size="35" color="#303133"></u-icon>
				</view>
				<view class="money-text">
					<text>{{money}}</text>
				</view>
			</view>
		</view>
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="title">
			<text v-if="current == 0">支出构成</text>
			<text v-else>入账构成</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts 
			type="pie"
			:opts="opts1"
			:chartData="chartData1"
			/>
		</view>
		
		<view class="parent">
			<view class="carbox">
				<view class="cell-group" v-for="(item1, index1) in listPie" :key="index1">
					<view class="cell-icon">
						<u-icon :name="item1.typeIcon" size="28" color="#2979ff" ></u-icon>
					</view>
					<view class="cell-item" @click="getStatlInfo(index1)">
						<view class="cell-info">
							<view class="info-text">
								<text>{{item1.name}}</text>
							</view>
						</view>
						<view class="cell-money">
							<u-icon name="rmb" size="25" color="#303133"></u-icon>
							<text>{{item1.value}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>
		
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="title">
			<text>每日对比</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts 
			  type="column"
			  :opts="day_opts"
			  :chartData="day_chartData"
			/>
		</view>
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="title">
			<text>月度对比</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts 
			  type="column"
			  :opts="month_opts"
			  :chartData="month_chartData"
			/>
		</view>
		
		<view class="money" style="margin-top: 20rpx; margin-bottom: 20rpx;">
			<view class="money-banner">
				<text v-if="current == 0">{{date.substring(5,7)}}月支出排行</text>
				<text v-else>{{date.substring(5,7)}}月入账排行</text>
			</view>
		</view>

		
		<view class="cell-group" v-for="(item1, index1) in monthDataList" :key="index1">
			<view class="cell-icon">
				<u-icon :name="item1.typeIcon" size="28" color="#2979ff" ></u-icon>
			</view>
			<view class="cell-item" @click="getDetailInfo(index1)">
				<view class="cell-info">
					<view class="info-text">
						<text>{{item1.billType}}</text>
					</view>
					<view class="info-remarks">
						<text>{{item1.billDate}}&nbsp;&nbsp;{{item1.billTime}}</text>
					</view>
				</view>
				<view class="cell-money">
					<text>{{[item1.state == 1 ? '-' : '+']+item1.money}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
	  data() {
	    return {
			date: this.getCurrentMonth(),
			current: 0,
			list: [{"value": 0,"name": "支出"	},{"value": 1,"name": "入账"}],
			income_text: "月度总入账：",
			expend_text: "月度总支出：",
			money: 0,
			listPie: [],
			monthDataList: [],
			
			chartData1: {
				series: [{data:[]}]
			},
			opts1: {
			  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			  padding: [5,5,5,5],
			  enableScroll: false,
			  extra: {
				pie: {
				  activeOpacity: 0.5,
				  activeRadius: 10,
				  offsetAngle: 0,
				  labelWidth: 15,
				  border: true,
				  borderWidth: 3,
				  borderColor: "#FFFFFF",
				  linearType: "custom"
				}
			  }
			},
			
			day_chartData: {
				categories: [],
				series: [{
					name: "每日金额",
					data: []
				}]
			},
			day_opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,15,0,5],
				enableScroll: false,
				legend: {},
				xAxis: {
				  disableGrid: true
				},
				yAxis: {
				  data: [
					{
					  min: 0
					}
				  ]
				},
				extra: {
				  column: {
					type: "group",
					width: 30,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08
				  }
				}
			},
			
			month_chartData:{
				categories: [],
				series: [{
					name: "月度金额",
					data: []
				}]
			},
			month_opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,15,0,5],
				enableScroll: false,
				legend: {},
				xAxis: {
				  disableGrid: true
				},
				yAxis: {
				  data: [
					{
					  min: 0
					}
				  ]
				},
				extra: {
				  column: {
					type: "group",
					width: 30,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08
				  }
				}
			}
	    };
	  },
	  onLoad() {
		this.load(uni.getStorageSync('userId'),this.date,this.current^1)
	  },
	  onPullDownRefresh() {
	  	this.load(uni.getStorageSync('userId'),this.date,this.current^1)
		uni.stopPullDownRefresh()
	  },
	  methods: {
		getCurrentMonth () {
		  	const date = new Date()
		    let year = date.getFullYear()
		    let month = date.getMonth() + 1
		  	month = month > 9 ? month : '0' + month
		  	let day = date.getDate();
		  	day = day > 9 ? day : '0' + day
		  	return `${year}-${month}-${day}`
		  },
		bindDateChange: function(e) {
		     this.date = e.target.value
			 this.load(uni.getStorageSync('userId'),this.date,this.current^1)
		 },
		  sectionChange(index){
			  this.current = index;
			  this.load(uni.getStorageSync('userId'),this.date,this.current^1)
		},
		load(userId, billDate, state){
			let params = {
				"userId" : userId,
				"billDate" : billDate,
				"state" : state
			}
			const _this = this
			uni.request ({
				header: {
					  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')  
				   },
				url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/statistics/statisticsLoad",
				method: 'POST',
				data: params,
				success(res) {
					_this.money = res.data.data.monthMoney
					_this.chartData1.series[0].data = res.data.data.pieData
					_this.day_chartData.categories = res.data.data.dayCategories
					_this.day_chartData.series[0].data = res.data.data.dayData
					_this.month_chartData.categories = res.data.data.monthCategories
					_this.month_chartData.series[0].data = res.data.data.monthData
					_this.listPie = res.data.data.pieDetailed
					_this.monthDataList = res.data.data.monthDataList
				}
			})
		},
		getStatlInfo(index){
			let type = this.listPie[index].name
			let month = this.date.substring(5,7)
			let state = this.current == 0 ? "支出" : "入账"
			let title_text = month+'月'+type+'共'+state
			
			let options = {
				"title_text": title_text,
				"money": this.listPie[index].value,
				"state": this.current^1,
				"date": this.date.substring(0,7),
				"billType": type
			}
			
			uni.navigateTo({
				url: '/pages/statistical/statInfo?options='+JSON.stringify(options)
			})
		},
		getDetailInfo (num) {
			let data = this.monthDataList[num]
			uni.navigateTo({
				url: '/pages/detailInfo/detailInfo?data='+JSON.stringify(data)
			})
		},
	  }
		

		
	};
</script>

<style>
	
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		margin-top: 50rpx;
	}
	.picher {
		font-size: 30rpx; 
		border-color: #007AFF; 
		border-style: solid;
		border-width: 6rpx;
		border-radius: 12rpx;
		background-color: #007AFF;
	}
	.topnav {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.leftnav {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 400rpx;
	}
	.rightnav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 300rpx;
	}
	.money {
		margin-top: 60rpx;
		margin-left: 30rpx;
	}
	.money-banner {
		font-size: 40rpx;
		color: #82848a;
	}
	.money-column {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.money-icon {
		width: 85rpx;
		display: flex;
		align-items: center;
	}
	.money-text {
		font-size: 80rpx;
		font-weight: bolder;
		display: flex;
		align-items: center;
	}
	.drivider {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
	}
	.title {
		font-size: 45rpx;
		margin-left: 30rpx;
		margin-top: 50rpx;
	}
	
	.parent {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.carBox {
		/* margin-top: 20rpx;
		border-radius: 25rpx;
		box-shadow: 0 0 10px rgb(142,142,142);
		background-color: rgba(253, 253, 253); */
	}
	
	.cell-group {
		display: flex;
		flex-wrap: wrap;
		/* margin-top: 30rpx; */
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		border-radius: 25rpx;
		box-shadow: 0 0 10px rgb(142,142,142);
		background-color: rgba(253, 253, 253);
	}
	.cell-icon {
		width: 85rpx;
		height: 85rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #2979ff;
		
		border-radius: 100%;
		box-sizing: border-box;
	}
	.cell-item {
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #c8c9cc;
		border-style: hidden hidden solid hidden;
		border-width: 1rpx;
	}
	.cell-info {
		width: 370rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 30rpx;
	}
	.info-text {
		font-size: 35rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
	}
	.info-remarks {
		width: 400rpx;
		color: #909399;
	}
	.cell-money {
		width: 200rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		font-size: 40rpx;
		font-weight: bolder;
		
	}
</style>
